<template>
	<view class="home-content">
		<uni-nav-bar left-icon="home" backgroundColor="transparent" color="#ffffff" :border="false" title="小春运动"
			@clickLeft="backIndex"></uni-nav-bar>
		<view class="top-box">
			<view class="top-ban">
				<!-- <image src="../../static/images/home/banner-bg.png" class="image"></image> -->
				<image src="../../static/images/home/banner-bg1.png" class="image"></image>
			</view>
		</view>
		<view class="container" v-if="deviceDetail">
			<view class="select-box">
				<view class="title-box">
					<view class="title">选择套餐</view>
					<view class="address">
						<image src="../../static/images/home/icon-address.png" class="image"></image>
						<view class="text" @click="makePhoneCall(deviceDetail.ground.kefu)">{{deviceDetail.ground.kefu}}
							-{{deviceDetail.ground.name}}</view>
					</view>
				</view>
				<view class="select-list">
					<view class="select-list-item" :class="selectIndex === 0 ? 'active' : ''"
						@click="setSelectIndex(0)">
						<view class="time">{{ deviceDetail.ground.rs_time }}分钟</view>
						<!-- <view class="tag">热身时间</view> -->
						<view class="item-price">{{ deviceDetail.ground.rs_price }}元</view>
					</view>
					<view class="select-list-item" :class="selectIndex === 1 ? 'active' : ''"
						@click="setSelectIndex(1)">
						<view class="hot-tag">
							<image src="../../static/images/home/icon-hot.png" class="img"></image>
							<text class="text">最火套餐</text>
						</view>
						<view class="time">{{ deviceDetail.ground.js_time }}分钟</view>
						<!-- <view class="tag">健身时间</view> -->
						<view class="item-price">{{ deviceDetail.ground.js_price }}元</view>
					</view>
					<view class="select-list-item" :class="selectIndex === 2 ? 'active' : ''"
						@click="setSelectIndex(2)">
						<view class="time">{{ deviceDetail.ground.qs_time }}分钟</view>
						<!-- <view class="tag">强身时间</view> -->
						<view class="item-price">{{ deviceDetail.ground.qs_price }}元</view>
					</view>
				</view>
			</view>
			<view class="recharge-box" v-if="rechargeList.length>0">
				<view class="recharge-title">
					<text style="font-weight: bold;font-size:32rpx;">多充多送
						<text style="color: #999999;font-size:28rpx;">(全国通用)</text>
					</text>
					<text style="color: #999999;" v-if="userInfo">可用余额:
						<text style="color: #FF4C00;">¥{{userTotalMoney}}</text>
					</text>
				</view>
				<view class="recharge-list">
					<view class="recharge-left" @click="userRecharge(0)">
						<image src="../../static/images/home/money_bg2.png" class="image"></image>
						<view class="recharge-info">
							<view class="label">充{{rechargeList[0].money}}元</view>
							<view class="value">{{rechargeList[0].memo}}元</view>
						</view>
					</view>
					<view class="recharge-right">
						<view class="recharge-item" @click="userRecharge(1)">
							<image src="../../static/images/home/money_bg1.png" class="image"></image>
							<view class="recharge-info">
								<view class="label">充{{rechargeList[1].money}}元</view>
								<view class="value">{{rechargeList[1].memo}}元</view>
							</view>
						</view>
						<view class="recharge-item" @click="userRecharge(2)">
							<image src="../../static/images/home/money_bg1.png" class="image"></image>
							<view class="recharge-info">
								<view class="label">充{{rechargeList[2].money}}元</view>
								<view class="value">{{rechargeList[2].memo}}元</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tips-box">
				<text style="color: #FF3737;">*</text>
				<text style="color: #999999;">特别提示： 该场地品牌方及运营方为飞鱼浮 </text>
				<view style="color: #999999;">品牌统一电话： <text style="color: #FF9900;"
						@click="makePhoneCall(phone)">{{phone}}</text></view>
			</view>
			<view class="fill-box" style="height: 160rpx;"></view>
		</view>
		<view class="button-group-box">
			<view class="button-group">
				<view class="button-left" @click="useCoupon">
					<image src="../../static/images/home/button1.png" class="image"></image>
					<view class="coupon">{{freeCouponList.length}}张券可用</view>
				</view>
				<view class="button-right">
					<view class="button2">
						<image src="../../static/images/home/button2.png" class="image"></image>
						<view class="money" v-if="deviceDetail">¥{{payMoney}}</view>
					</view>
					<view class="button3" @click="settlement">去结算</view>
				</view>
			</view>
		</view>
		<uni-popup ref="rechargePopup" type="center" border-radius="10px 10px 0 0" background-color="#ffffff">
			<view class="recharge-popup-box">
				<image src="../../static/images/home/recharge.png" class="image"></image>
				<view class="money-box">
					<view class="money">充{{rechargeDetail.money}}元</view>
					<view class="gifts">实{{rechargeDetail.memo}}元</view>
				</view>
				<view class="button-group">
					<view class="button button1" @click="cancelRecharge">我再想想</view>
					<view class="button button2" @click="rechargePay">立即支付</view>
				</view>
				<view class="agree-tit">
					点击支付既表示同意<text @click="this.showRechargeAgree = true"
						class="text">《充值协议》</text>，知悉本次充值本金和返现余额不可提现转移。
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="payPopup" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff">
			<view class="pay-popup-box">
				<view class="pay-title">
					<view class="left"></view>
					<view class="center">支付订单</view>
					<view class="right" @click="cancelPay">取消</view>
				</view>
				<view class="paylist">
					<view class="paylist-item" v-for="(item, i) in paylist" :key="i" @click="paytype=item.type">
						<view class="paylist-item-left">
							<image :src="item.imgSrc" class="img"></image>
							<text class="text"> {{ item.name }}</text>
						</view>
						<view class="paylist-item-right">
							<view v-if="item.type=='free_coupon'">{{freeCouponList.length}}张</view>
							<view v-if="item.type=='money'">余额{{userTotalMoney}}元</view>
							<view class="checked btn" v-if="paytype === item.type">
								<image src="../../static/images/home/checked.png" class="image"></image>
							</view>
							<view class="unchecked btn" v-else>
								<image src="../../static/images/home/unchecked.png" class="image"></image>
							</view>
						</view>

					</view>
				</view>
				<view class="btn-box">
					<view class="button-group">
						<view class="button2">
							<image src="../../static/images/home/button2.png" class="image"></image>
							<view class="money" v-if="deviceDetail">¥{{payMoney}}</view>
						</view>
						<view class="button3" @click="limitUse">去支付</view>
					</view>
					<view class="agree-text">
						<image class="img" src="../../static/images/home/checked.png" v-if="isAgree"
							@click="this.isAgree = false">
						</image>
						<image class="img" src="../../static/images/home/unchecked.png" v-if="!isAgree"
							@click="this.isAgree = true">
						</image>
						<view class="agree-tit">
							我已阅读并同意
							<text @click="this.showUserAgree = true" class="text">《服务协议》</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="agree-dialog" v-if="showRechargeAgree">
			<view class="agree-box">
				<view class="t0">
					《小春运动充值协议》
					<view class="close" @click="this.showRechargeAgree = false">
						<image src="../../static/images/home/close.png" class="image"></image>
					</view>
				</view>
				<view class="content">
					<view class="t1">
						一、协议内容
						<br />
						用户在小春运动平台上参与充值活动，即可获得相应比例的余额，并体现在该用户的小春运动账户上(目前充值金额:余额=1:1)。若有进行充返活动，将额外获得对应返还比例的余额或者其他物品(具体以活动规则为准)。
						<br />
						温馨提示:
						<br />
						充值活动得到的余额仅限在小春运动进行消费(请用微信直接扫码付费使用)，不支持购买卡券等活动产品，建议您根据实际需求进行充值。
						<br />
						二、充值余额有效期
						<br />
						充值所获得的账户余额有效期为自充值日起至用完即止。
						<br />
						三、充值余额使用规则
						<br />
						充值余额仅可用于支付本人在小春运动订单中的费用，不支持购买卡券等活动产品，不可提现、转赠退款。
						<br />
						四、特别声明
						<br />
						1.凡通过活动获取的余额与卡、券仅限与账户绑定的微信或支付宝用户使用。不能提供给第三方机构或个人使用、亦不能代他人扫码使用。
						2.充返活动福利仅提供给正当、合法使用小春运动客户的充值费用。
					</view>
				</view>
			</view>
		</view>
		<view class="agree-dialog" v-if="showUserAgree">
			<view class="agree-box">
				<view class="t0">
					服务协议
					<view class="close" @click="this.showUserAgree = false">
						<image src="../../static/images/home/close.png" class="image"></image>
					</view>
				</view>
				<view class="t1">
					为避免健身过程中发生意外和纠纷，请在使用本公司健身设备前仔细阅读本"用户服务声明"，并正确使用。
					<br />
					1、本健身设备为付费体验服务，未付费用户请勿隨意摆弄。如果发现设备损坏，请停止使用。
					<br />
					2、严禁在健身设备上进行危动作，不满12周岁的儿童必须有监护人在旁边才能使用健身设备。
					<br />
					3、患有急性疾病、孕妇和酒醉人员不适合在本设备上进行健身运动。
					<br />
					4、智障或未成年人使用时必须由正常人监护再使用。
					<br />
					5、请根据自己的身体状况安排适度的健身时间和运动强度。
					<br />
					6、在使用过程中，请照看好随身携带的物品防止丢失。
					<br />
					7、最终解释权归深圳市小春云科技有限公司所有。
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js';
	export default {
		data() {
			return {
				isAgree: true,
				showUserAgree: false,
				showRechargeAgree: false,
				rechargeList: [],
				rechargeDetail: null,
				freeCouponList: [],
				selectIndex: 1,
				device_id: null,
				active_type: null,
				deviceDetail: null,
				paytype: 'wechat',
				orderid: null,
				userInfo: {
					money: "0.00",
					gifts_money: "0.00"
				},
				phone: '',
				paylist: [{
						imgSrc: '../../static/images/home/wechat.png',
						name: '微信支付',
						type: 'wechat'
					},
					{
						imgSrc: '../../static/images/home/pay-icon.png',
						name: '余额支付',
						type: 'money'
					},
				]
			};
		},
		onLoad(options) {
			console.log(options)
			if (options && options.q) {
				console.log(decodeURIComponent(options.q))
				this.device_id = this.getQueryParam(decodeURIComponent(options.q), 'sn')
				this.active_type = this.getQueryParam(decodeURIComponent(options.q), 'type')
			}
			if (options && options.type) {
				this.active_type = options.type
			}
			if (options && options.sn) {
				this.device_id = options.sn
			}
			if (options && options.date) {
				this.date = options.date
			}
			let token = uni.getStorageSync("token")
			if (!token) {
				this.wxAuthorize()
			} else {
				this.getUserInfo()
				this.getRechargeConfig();
			}
		},
		onShow() {
			let token = uni.getStorageSync("token")
			if (token) {
				this.getFreeCouponList()
			}
			if (this.active_type) {
				this.setSelectIndex(0)
			} else {
				this.setSelectIndex(1)
			}
			this.clickTel()
		},
		computed: {
			userTotalMoney() {
				let toatlMoney = Number(this.userInfo.money) + Number(this.userInfo.gifts_money)
				return toatlMoney.toFixed(2)
			},
			payMoney() {
				let amount = '0.00'
				if (!this.deviceDetail) {
					return amount
				}
				if (this.selectIndex == 0) {
					amount = this.deviceDetail.ground.rs_price
				}
				if (this.selectIndex == 1) {
					amount = this.deviceDetail.ground.js_price
				}
				if (this.selectIndex == 2) {
					amount = this.deviceDetail.ground.qs_price
				}
				return amount
			},
		},

		methods: {
			clickTel() {
				api.sysConfig({
					site: 'sys_kefu'
				}).then(res => {
					this.phone = res.data
				})
			},
			//使用免单券
			useCoupon() {
				if (this.freeCouponList.length == 0) {
					return this.showToast('无免单券可用')
				}
				this.setSelectIndex(0)
				this.settlement()
				this.paytype = 'free_coupon'
			},
			cancelRecharge() {
				this.$refs.rechargePopup.close()
			},
			rechargePay() {
				let that = this
				api.submit({
					id: this.rechargeDetail.id
				}).then(res => {
					if (res.code) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: function(payres) {
								that.showToast("支付成功")
								setTimeout(() => {
									that.getUserInfo()
								}, 1000)
							},
							fail: function(err) {
								that.showToast("用户取消支付")
							}
						});
					} else {
						that.showToast(res.msg)
					}
				});
			},
			userRecharge(index) {
				this.rechargeDetail = this.rechargeList[index]
				this.$refs.rechargePopup.open('center')
			},
			backIndex() {
				uni.switchTab({
					url: "/pages/home/index"
				})
			},
			cancelPay() {
				this.$refs.payPopup.close()
			},
			settlement() {
				this.$refs.payPopup.open('bottom')
			},
			wxAuthorize() {
				let that = this
				uni.showLoading({
					mask: true,
					title: "登录中,请稍后"
				})
				uni.login({
					provider: 'weixin',
					success: login => {
						api.otherLogin({
							code: login.code
						}).then(wx => {
							uni.getUserInfo({
								provider: "weixin",
								success: info => {
									api.getWxUserInfo({
										openid: wx.data.openid,
										sessionKey: wx.data.session_key,
										encryptedData: info.encryptedData,
										iv: info.iv
									}).then(wxUser => {
										that.showToast("登录成功")
										uni.hideLoading()
										that.$store.commit('saveToken', wxUser.data
											.token)
										that.getUserInfo()
										that.getRechargeConfig();
									}).catch(error => {
										that.showToast("登录失败")
										uni.hideLoading()
									})
								}
							})
						})
					},
					fail() {
						that.showToast("登录失败")
						uni.hideLoading()
					}
				})
			},
			getUserInfo() {
				api.getUserInfo().then(res => {
					if (res.code == 401) {
						uni.removeStorageSync('token')
						this.wxAuthorize()
					} else {
						this.userInfo = res.data.userinfo
						this.$store.commit('saveUserInfo', res.data.userinfo)
						this.getFreeCouponList()
						if (this.device_id) {
							this.getDeviceInfo()
						}
						if (this.active_type == 'active' && res.data.userinfo.free_acive_type == 0) {
							uni.navigateTo({
								url: '/pages/active/newActive'
							})
						}
						if (this.active_type == 'active' && res.data.userinfo.free_acive_type == 1) {
							uni.navigateTo({
								url: '/pages/active/joinGroup'
							})
						}

					}
				})
			},
			getFreeCouponList() {
				api.getFreeCouponList({
					status: 'created',
				}).then(res => {
					this.freeCouponList = res.data
				})
			},
			getQueryParam(url, param) {
				const queryString = url.split('?')[1];
				if (!queryString) return null;
				const params = queryString.split('&');
				for (let i = 0; i < params.length; i++) {
					const [key, value] = params[i].split('=');
					if (decodeURIComponent(key) === param) {
						return decodeURIComponent(value);
					}
				}
				return null;
			},
			// 扫码授权
			openScanCode() {
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: 'qrCode',
					success: res => {
						that.device_id = that.getQueryParam(res.result, 'sn')
						that.getDeviceInfo()
					},
					fail: () => {
						that.showToast('用户取消扫码')
					}
				})
			},
			getDeviceInfo() {
				// 获取设备码
				api.getDeviceInfo({
					id: this.device_id
				}).then(res => {
					if (!res.data) {
						this.showToast('未查询到该设备请联系客服')
					} else {
						this.deviceDetail = res.data
					}
				})
			},
			showToast(title) {
				uni.showToast({
					icon: "none",
					title: title
				})
			},
			setSelectIndex(index) {
				this.paytype = 'wechat'
				this.selectIndex = index
				const commonPaylist = [{
						imgSrc: '../../static/images/home/wechat.png',
						name: '微信支付',
						type: 'wechat'
					},
					{
						imgSrc: '../../static/images/home/pay-icon.png',
						name: '余额支付',
						type: 'money'
					}
				];
				if (this.selectIndex === 0) {
					this.paylist = [...commonPaylist, {
						imgSrc: '../../static/images/home/free-order.png',
						name: '免单支付',
						type: 'free_coupon'
					}];
				} else {
					this.paylist = [...commonPaylist];
				}
			},
			limitUse() {
				let that = this
				if (!this.isAgree) {
					return this.showToast('请同意服务协议')
				}
				let type, yd_time, amount;
				if (this.selectIndex == 0) {
					type = 'rs'
					yd_time = this.deviceDetail.ground.rs_time
					amount = this.deviceDetail.ground.rs_price
				}
				if (this.selectIndex == 1) {
					type = 'js'
					yd_time = this.deviceDetail.ground.js_time
					amount = this.deviceDetail.ground.js_price
				}
				if (this.selectIndex == 2) {
					type = 'qs'
					yd_time = this.deviceDetail.ground.qs_time
					amount = this.deviceDetail.ground.qs_price
				}
				let data = {
					type: type,
					yd_time: yd_time,
					amount: amount,
					ground_id: this.deviceDetail.ground_id,
					device_id: this.deviceDetail.id,
					paytype: this.paytype,
				}
				//提交订单
				api.submitOrder({
					type: type,
					yd_time: yd_time,
					amount: amount,
					ground_id: this.deviceDetail.ground_id,
					device_id: this.deviceDetail.id,
					paytype: this.paytype,
				}).then(res => {
					that.getFreeCouponList()
					if (res.code) {
						if (that.paytype == 'wechat') {
							that.orderid = res.data.order.orderid
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								signType: res.data.signType,
								paySign: res.data.paySign,
								success: function(res) {
									uni.redirectTo({
										url: '/pages/pay/paySuccess?order_id=' + that.orderid
									})
								},
								fail: function(err) {
									that.showToast("用户取消支付")
								}
							});
						} else {
							that.orderid = res.data.orderid
							uni.redirectTo({
								url: '/pages/pay/paySuccess?order_id=' + this.orderid
							})
						}
					} else {
						that.showToast(res.msg)
					}
				});
			},
			goTocharge(index) {
				uni.navigateTo({
					url: '/pages/user/recharge?index=' + index // 跳转到对应路径的页面
				});
			},
			getRechargeConfig() {
				api.rechargeConfig().then(res => {
					this.rechargeList = res.data;
				});
			},
			// 服务协议
			getServicePro() {
				api.sysConfig({
					site: 'service_protocol'
				}).then(res => {
					console.log(res);
				})
			},
			makePhoneCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},

			loginOut() {
				uni.navigateBack({
					delta: 1 // 默认值是1，表示返回的页面层数
				});
			}
		}
	};
</script>

<style lang="scss">
	.home-content {
		padding: 88rpx 0rpx 20rpx;
		background: url('https://oss.bigchun.com/img/home/header-bg.png') no-repeat;
		background-size: 100% 328rpx;

		.recharge-popup-box {
			position: relative;
			background-color: #ffffff;
			width: 664rpx;
			height: 494rpx;
			background: #FFFFFF;
			text-align: center;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.image {
				width: 396rpx;
				height: 286rpx;
				margin-top: -216rpx;
			}

			.money-box {
				color: #333333;
				margin: 42rpx 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 55rpx;
				color: #333333;

				.gifts {
					color: #FF4D00;
				}
			}

			.button-group {
				margin: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.button {
					width: 278rpx;
					height: 86rpx;
					font-size: 28rpx;
					text-align: center;
					line-height: 86rpx;
					border-radius: 43rpx 43rpx 43rpx 43rpx;
				}

				.button1 {
					color: #3A9DFE;
					border: 4rpx solid #3C9DFE;
				}

				.button2 {
					color: #ffffff;
					background: linear-gradient(90deg, #389CFE 0%, #8AA2F8 100%);
				}
			}

			.agree-tit {
				margin: 18rpx 40rpx 0;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
				text-align: left;

				.text {
					color: #49a1fd;
				}
			}
		}

		.pay-popup-box {
			position: relative;
			background-color: #ffffff;

			.pay-title {
				font-size: 32rpx;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;

				.center {
					font-size: 32rpx;
					color: #333333;
				}

				.right {
					font-size: 24rpx;
					color: #333333;
				}
			}

			.paylist {
				background: #ffffff;
				border-radius: 20rpx;
				padding: 20rpx;
				margin: 20rpx 0;

				.paylist-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx 0;

					.paylist-item-right {
						display: flex;
						align-items: center;
						color: #F13933;
						font-size: 24rpx;

						.btn {
							margin-left: 20rpx;
						}
					}

					.paylist-item-left {
						display: flex;
						align-items: center;

						.img {
							width: 52rpx;
							height: 52rpx;
							margin-right: 16rpx;
						}

						.text {
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
							line-height: 40rpx;
							text-align: left;
						}
					}

					.btn {
						.image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}

			.btn-box {

				.button-group {
					margin: 0 20rpx;
					display: flex;
					justify-content: center;

					.button2 {
						position: relative;
						width: 254rpx;
						height: 104rpx;
						line-height: 104rpx;
						font-size: 32rpx;
						color: #FFFFFF;

						.image {
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
						}

						.money {
							position: absolute;
							z-index: 51;
							margin-left: 96rpx;
						}
					}

					.button3 {
						font-size: 32rpx;
						color: #FFFFFF;
						position: relative;
						width: 426rpx;
						height: 104rpx;
						text-align: center;
						line-height: 104rpx;
						background-color: #379bfd;
						border-radius: 0 42rpx 42rpx 0;
					}
				}


				.agree-text {
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 30rpx auto;

					.img {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					.agree-tit {
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						line-height: 40rpx;
						text-align: right;

						.text {
							color: #49a1fd;
						}
					}
				}
			}

		}

		.button-group-box {
			position: fixed;
			bottom: 0;
			z-index: 50;
			width: 100%;
			height: 142rpx;
			display: flex;
			align-items: center;
			background-color: #ffffff;

			.button-group {
				padding: 0 30rpx;
				width: 100%;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.button-left {
					position: relative;
					height: 102rpx;
					flex: 1;

					.image {
						width: 100%;
						height: 102rpx;
						position: absolute;
						top: 0;
					}

					.coupon {
						position: absolute;
						z-index: 51;
						text-align: center;
						font-size: 28rpx;
						color: #FFFFFF;
						bottom: 4rpx;
						margin-left: 20rpx;
					}
				}

				.button-right {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					align-self: flex-end;

					.button2 {
						position: relative;
						width: 254rpx;
						height: 84rpx;
						line-height: 84rpx;
						font-size: 32rpx;
						color: #FFFFFF;

						.image {
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
						}

						.money {
							position: absolute;
							z-index: 51;
							margin-left: 96rpx;
						}
					}

					.button3 {
						font-size: 32rpx;
						color: #FFFFFF;
						position: relative;
						width: 262rpx;
						height: 84rpx;
						text-align: center;
						line-height: 84rpx;
						background-color: #379bfd;
						border-radius: 0 42rpx 42rpx 0;
					}
				}

			}
		}

		.top-box {
			padding: 26rpx;
			margin: 32rpx 30rpx 0;
			background: #ffffff;
			box-shadow: 0px 0px 12rpx 0px rgba(102, 226, 244, 0.19);
			border-radius: 20rpx;

			.top-ban {
				.image {
					width: 100%;
					height: 148rpx;
				}
			}
		}

		.container {
			margin: 0 30rpx;

			.tips-box {
				text-align: center;
				padding: 30rpx 100rpx;
				font-size: 24rpx;
				line-height: 40rpx;
			}

			.recharge-box {
				padding: 10rpx;
				background: #FFF3DD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.recharge-title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx 10rpx;
				}

				.recharge-list {
					display: flex;
					justify-content: space-between;

					.recharge-info {
						position: relative;
						z-index: 10;
						width: 100%;
						height: 100%;
						text-align: center;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.label {
							font-size: 28rpx;
							color: #666666;
						}

						.value {
							font-size: 32rpx;
							color: #333333;
						}
					}

					.recharge-left {
						position: relative;
						width: 312rpx;
						height: 321rpx;
						background: #F9F9F9;
						border-radius: 12rpx 12rpx 12rpx 12rpx;

						.image {
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
						}
					}

					.recharge-right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.recharge-item {
							position: relative;
							width: 322rpx;
							height: 157rpx;
							background: #F9F9F9;
							border-radius: 12rpx 12rpx 12rpx 12rpx;

							.image {
								width: 100%;
								height: 100%;
								position: absolute;
								top: 0;
							}
						}
					}
				}
			}

			.select-box {
				background: #ffffff;
				border-radius: 20rpx;
				padding: 20rpx;
				margin: 20rpx 0;

				.title-box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						font-size: 30rpx;
						color: #000000;
						line-height: 42rpx;
						text-align: left;
						position: relative;
						padding-left: 20rpx;

						&::before {
							position: absolute;
							content: '';
							width: 10rpx;
							height: 30rpx;
							background: #49a1fd;
							border-radius: 6rpx;
							left: 0;
							top: 6rpx;
						}
					}

					.address {
						display: flex;
						align-items: center;

						.image {
							width: 22rpx;
							height: 28rpx;
						}

						.text {
							font-weight: 400;
							font-size: 28rpx;
							color: #737373;
							line-height: 40rpx;
							text-align: center;
							margin-left: 4rpx;
						}
					}
				}

				.select-list {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;

					.select-list-item {
						width: 31%;
						box-sizing: border-box;
						background: #f7f7f7;
						border-radius: 28rpx;
						padding: 30rpx 20rpx;
						position: relative;
						text-align: center;

						.time {
							font-size: 34rpx;
							margin-top: 20rpx;
						}

						&.active {
							background: #f8fcff;
							box-shadow: 0px 0px 8rpx 0px rgba(102, 226, 244, 0.19);
							border-radius: 16rpx;
							border: 2rpx solid #49a1fd;

							.time {
								font-size: 38rpx;
								font-weight: bold;
								color: #49a1fd !important;
							}

							.tag {
								color: #49a1fd !important;
							}
						}

						.hot-tag {
							position: absolute;
							top: 0;
							left: 0;
							background: #49a1fd;
							border-radius: 16rpx 0px 22rpx 0px;
							width: 148rpx;
							height: 34rpx;
							display: flex;
							align-items: center;

							.img {
								width: 26rpx;
								height: 26rpx;
							}

							.text {
								font-weight: 400;
								font-size: 24rpx;
								color: #ffffff;
								line-height: 34rpx;
								text-align: left;
							}
						}

						.item-price {
							font-weight: 400;
							font-size: 28rpx;
							margin-top: 20rpx;
							color: #fb2525;
							line-height: 40rpx;
							text-align: center;
						}
					}
				}
			}

		}

		.agree-dialog {
			background: rgba(0, 0, 0, 0.6);
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 200;

			.agree-box {
				background: url('https://oss.bigchun.com/img/home/agree-bg.png') no-repeat;
				background-size: 100% 100%;
				padding: 40rpx 30rpx;
				margin: 30% 40rpx;
				height: 800rpx;
				overflow-y: scroll;

				.t0 {
					font-size: 34rpx;
					color: #000000;
					line-height: 48rpx;
					text-align: center;
					position: relative;

					.close {
						position: absolute;
						right: 0;
						top: 0;
						cursor: pointer;

						.image {
							width: 26rpx;
							height: 26rpx;
						}
					}
				}
			}

			.t1 {
				font-weight: 400;
				font-size: 28rpx;
				color: #444444;
				line-height: 50rpx;
				text-align: left;
			}
		}
	}
</style>